<template>
  <div class="index">
    <div class="silde">
      <!-- <el-carousel :interval="3000" type="card" height="400px">
                <el-carousel-item v-for="item in sildeMap" :key="item.index">
                    <img :src="item.url" >
                </el-carousel-item>
      </el-carousel>-->
      <el-carousel :interval="4000" arrow="always" class="banner"  height="550px">
        <el-carousel-item v-for="item in sildeMap" :key="item.index" >
         <img class="bannerImage" :src="item.url" >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="introduce_top w">
      <img src="../assets/images/2.png" alt="图片加载失败" />
      <h1>我们能为你做什么?</h1>
      <p>
        <img src="../assets/images/line.png" alt="图片加载失败" />
      </p>
      <p>
        猿E科技，代表着程序猿的我们一起为共同的梦想而组件的一支开发团队。建队初衷，将有共同兴趣爱好的朋友和开发人员融聚在一起。
        在一个新的‘家庭’里面大家相互沟通，相互学习。砥砺奋进,筑梦前行。
      </p>
      <p></p>
    </div>
    <div class="introduce_bottom site">
      <ul>
        <li>
          <a href>
            <img src="../assets/images/red1.png" alt class="red" />
            <img src="../assets/images/3.png" alt="图片加载失败" class="orient" />
            <p>定制网站建设</p>
          </a>
        </li>
        <li>
          <a href>
            <img src="../assets/images/4.png" alt="图片加载失败" class="orient" />
            <p>HTML5网站建设</p>
          </a>
          <div class="red">
            <img src="../assets/images/red2.png" alt />
          </div>
        </li>
        <li>
          <a href>
            <img src="../assets/images/5.png" alt="图片加载失败" class="orient" />
            <p>移动端应用开发</p>
          </a>
          <div class="red">
            <img src="../assets/images/red3.png" alt />
          </div>
        </li>
        <li>
          <a href>
            <img src="../assets/images/6.png" alt="图片加载失败" class="orient" />
            <p>域名服务器搭建</p>
          </a>
          <div class="red">
            <img src="../assets/images/red4.png" alt />
          </div>
        </li>
      </ul>
    </div>
    <ul class="team-members">
      <li class="teamLi">
        <img src="../assets/images/slide4.jpg" alt="图片加载失败" />
        <div class="describe">
          <div class="post">
            后台开发工程师
            <span>5人</span>
          </div>
        </div>
      </li>
      <li class="teamLi">
        <img src="../assets/images/web.jpg" alt="图片加载失败" />
        <div class="describe">
          <div class="post">
            前端开发工程师
            <span>5人</span>
          </div>
        </div>
      </li>
      <li class="teamLi">
        <img src="../assets/images/ui1.jpg" alt="图片加载失败" />
        <div class="describe">
          <div class="post">
            UI设计师
            <span>5人</span>
          </div>
        </div>
      </li>
      <li class="teamLi">
        <img src="../assets/images/ui.jpg" alt="图片加载失败" />
        <div class="describe">
          <div class="post">
            后台开发
            <span>5人</span>
          </div>
        </div>
      </li>
      <li class="teamLi">
        <img src="../assets/images/java.jpg" alt="图片加载失败" />
        <div class="describe">
          <div class="post">
            后台开发
            <span>5人</span>
          </div>
        </div>
      </li>
      <li class="teamLi">
        <img src="../assets/images/expect.jpg" alt="图片加载失败" />
        <div class="describe">
          <div class="post">
            虚位以待...
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      sildeMap: state => state.url.slideList
    })
  },
  methods: {}
};
</script>

<style scoped lang="scss">
.el-carousel__container{
    width: 100%;
    height: 600px !important;
}
.bannerImage{
    width: 100%;
    height: 100%;
}
.index {
  .title {
    width: 80%;
    margin: 0 auto;
    display: flex;

    .text {
      flex: 2;
      text-indent: 2em;
      font-size: 16px;
    }

    .img {
      flex: 1;
      img {
        width: 100px;
        height: 100px;
      }
    }
  }

  .introduce_top {
    width: 100%;
    margin:0 auto;
    text-align: center;
    padding-top: 30px;
    background: #ffffff;
  }
  .introduce_top h1 {
    font-weight: 300;
    color: #e60000;
    font-size: 30px;
    margin-top: 6px;
  }
  .introduce_top img {
    vertical-align: middle;
  }
  .introduce_top p {
    width: 85%;
    text-align: center;
    margin: 0 auto;
    line-height: 22px;
    font-size: 14px;
  }
  .introduce_bottom {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
  }
  .introduce_bottom ul {
    overflow: hidden;
    margin: 60px auto;
  }
  .introduce_bottom li {
    width: 25%;
    float: left;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    position: relative;
    overflow: hidden;
    p {
      margin-top: 15px;
    }
  }
  .orient {
    width: 142px;
    height: 142px;
    vertical-align: center;
  }
  .red {
    width: 142px;
    height: 142px;
    position: absolute;
    right: 132%;
    top: 0;
    transition: 0.4s;
  }

  .introduce_bottom li:hover .red {
    right: 0;
    left: 0;
    margin: auto;
  }
  .team-members {
    width: 100%;
    padding: 50px 100px;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .teamLi {
      width: 25.5%;
      margin-bottom: 40px;
      font-size: 16px;
      border-radius: 2%;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 250px;
      }
      .post {
        background-color: #fff;
        padding: 10px;
      }
      
      .post:hover{
          color:rgb(77, 178, 224);
      }
    }
    .teamLi:hover{
           box-shadow:5px 10px  10px 2px rgb(224, 223, 223);  
           transform: translateX(3px);
           transform: translateY(-3px);
        //    transform: scale(1.02);

      }
    
    
  }
}
</style>